<template>
  <div class="add" style="position: fixed; top: 0; width: 100%; height: 2000px; background: whitesmoke">
    <div style="width: 100%;height: 55px;background: white;display: flex" >
      <div style="font-family: 'Avenir';font-size: 20px;margin: 17px 0 0 15px;width: 12%;display: flex" @click="fanhui"><van-icon name="arrow-left" /></div>
      <div style="font-family: 'Avenir';font-size: 20px;margin: 12px 0 0 115px">补充反馈</div>
    </div>
    <div class="big">
      <div class="one" >
        意见描述
      </div>
      <div class="three">
        <van-field
            class="three1"
            v-model="supplement.content"
            :disabled="isDisabled"
            rows="2"
            autosize
            type="textarea"
            placeholder="请留下您的宝贵意见或建议"
            show-word-limit
        />
      </div><!--            :disabled="isDisabled"-->
      <div class="four">
        <van-image v-for="(imageUrl, index) in imgsList" v-if="isDisabled" :key="index" :src="imageUrl" width="100px" height="100px" class="image-item" />
        <van-uploader v-model="fileList" multiple :max-count="3" v-if="!isDisabled" />
      </div>
    </div>

    <van-button type="primary" style="width: 80%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 20px; border-radius:50px;" v-if="!isDisabled" @click="submit">提交</van-button>
    <van-button type="primary" style="width: 80%; height: 45px; background: #51b8ff;
     border: white; font-size: 18px; margin-top: 20px; border-radius:50px;" v-if="isDisabled" @click="fanhui">返回</van-button>
  </div>
</template>

<script>


import {add, file ,supplementAdd ,findSupplement} from "@/api/SetUp/feedback/feedback";

export default {
  data() {
    return {
      fileList:[],
      imgsList:[],
      query:{
        id:null,
      },
      supplement: {
      },
      isDisabled:false,
      imgs:null,
      message:'',
      user:JSON.parse(localStorage.getItem('login')),
    };
  },
  created() {
    this.query=this.$route.query;
    this.findSupplement()
  },
  methods: {
    findSupplement(){
      findSupplement(this.query.id).then(row=>{
        console.log(row)
        if(row.data.code==200){
          this.supplement=row.data.data,
              console.log(this.supplement)
          this.isDisabled=true
          if(this.supplement.imgs!=null){
            this.imgsList=this.supplement.imgs.split(',')
            console.log(this.imgsList)
          }
        }
      })
    },
    submit(){
      const uploadPromises = this.fileList.map(item => {
        const forms = new FormData();
        forms.append("file", item.file);
        return file(forms).then(row => {
          this.imgsList.push(row.data);
        });
      });
      Promise.all(uploadPromises).then(() => {
        this.imgsList.forEach(item=>{
          if(this.imgs==null){
            this.imgs=item;
          }else{
            this.imgs=this.imgs+','+item;
          }
        })
        this.supplement.imgs=this.imgs
        this.supplement.fid=this.query.id
        supplementAdd(this.supplement).then(row=>{
          if(row.data.code==200){
            this.$toast('反馈成功');
            this.$router.push("/myFeedback")
          }else{
            this.$toast('网络繁忙');
          }

        })

      });
    },
    fanhui() {
      this.$router.push('/feedback')
    },
  }
}

</script>

<style scoped>
.big {
  width: 100%;
  height: 420px;
  background: white;
  margin-top: 15px;
}
.one{
  width: 90%;
  margin: 10px 0 0 12px ;
  display: flex;
  padding-top: 10px;
  font-size: 17px;
}
.three{
  width: 95%;
  height: 200px;
  margin: 10px 0 0 11px;
  border-top: whitesmoke 2px solid;
}
.three1{
  width: 100%;
  height: 100%;
}
.four{
  width: 95%;
  height: 100px;
  display: flex;
  margin: 10px 0 0 11px;
}
.big2{
  width: 99%;
  height: 105px;
  margin-top: 15px;
  background: white;
  padding-top: 1px;
}
.five{
  width: 93%;
  height: 40px;
  background: whitesmoke;
  margin-left: 15px;
  border-radius: 10px;
  display: flex;
  line-height: 40px;
}
.image-item{
  margin-left: 10px;
}
</style>
